﻿@{
    ViewBag.Title = "主页";
}
<script src="~/js/knockout-3.4.1.js"></script>

<h2>学生  管理</h2>

<h2>这是成绩管理系统！！！</h2>


<div class="container-fluid">
    <div class="row">
       
        <nav class="col-md-2 col-xs-12">
           
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">学生的管理</a></li>
                <li><a href="/Home/Class">班级 管理</a></li>
                <li><a href="/Home/Course">课程de 管理</a></li>
                <li><a href="/Home/Score">成绩管理</a></li>
                <li><a href="#">退出</a></li>
               
            </ul>
        </nav>
        <div id="content" class="col-md-10 col-xs-12">

            <button type="button" class="btn" data-toggle="modal" data-target="#panelUser" data-bind="click:$root.AddNewBefore">加入新同学</button>
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            ID
                        </th>
                        <th>
                           姓名
                        </th>
                        <th>
                           成绩
                        </th>
                        <th>
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: students">
                    <tr>
                        <td data-bind="text:Id"></td>
                        <td data-bind="text:SName"></td>
                        <td data-bind="text:IScore"></td>

                        <td>

                            <a href="javascript:void(0);" data-bind="click:$root.EditStudent">编辑</a>


                            <a href="javascript:void(0);" data-bind="click:$root.DelStudent">删除</a>

                        </td>
                    </tr>

                </tbody>

            </table>


        </div>




    </div>
</div>




<div class="modal fade" tabindex="-1" role="dialog" id="panelUser">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">用户详情</h4>
            </div>
            <div class="modal-body">
               
                <form data-bind="with:studentItem">
                    <div class="form-group">
                        <label for="exampleInputEmail1">用户名:</label>
                        <input type="text" class="form-control" id="txtbUserName" placeholder="用户名" data-bind="value:SName">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">成绩</label>
                        <input type="text" class="form-control" id="txtbScore" placeholder="成绩" data-bind="value:IScore">
                    </div>


                </form>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="AddNewStudent(); return false;">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script type="text/javascript">


    function AddNewStudent() {
        var txtbUserName = myView.studentItem().SName;
        var txtbScore = myView.studentItem().IScore;
        if(txtbUserName==''||txtbScore==''){
            alert("出错了,用户名和成绩都不能为空!!!");
            return false;
        }




        $.ajax({
            url: '/Home/AddOrUpdateUser',
            data: {
                Id: myView.studentItem().Id,
                Name: txtbUserName,
                Score: txtbScore
            },
            type:'post',
            success: function (result) {

                getStudents();//重新刷新前面的数据

                $("#panelUser").modal('hide');


            }//end success
        });
        //end ajax

    }


    function getStudents() {
        $.ajax({
            url: '/Home/getStudents',
       
            type: 'post',
            success: function (result) {

                myView.students(result);


                //var tbLen = result.length;

                //var row = "";
                //for (var i = 0; i < tbLen; i++) {
                //    row += "<tr><td>";
                //    row += result[i].Id + "</td>";
                //    row += "<td>" + result[i].SName + "</td>";
                //    row += "<td>" + result[i].IScore + "</td>";
                //    row += "</tr>";
                //}

                //$("#myT").html(row);


            }//end success
        });
        //end ajax

    };


    function ViewModel() {
        var self = this;

        self.studentItem = ko.observable({
            SName:'',IScore:0
        });//一个关于用户的可观察对象


        self.students = ko.observableArray([]);


        self.DelStudent = function (a, b, c, d) {

            if (confirm("真的要删除此项吗？")) {
                $.ajax({
                    url: '/Home/DelUser',
                    data: { ID: a.Id },
                    type: 'post',
                    success: function (result) {

                        if (result != null && result.ID != null && result.ID > 0) {
                            getStudents();//重新刷新前面的数据

                        } else if (result.ID <= 0) {

                            alert(result.Msg);//一般出错
                        } else {
                            alert("出错了!" + result);//一般出错
                        }





                    }//end success
                });

            }

           

        }


        self.EditStudent = function (a, b, c, d) {
            self.studentItem(a);

            $("#panelUser").modal('show');
        }

        self.AddNewBefore = function (a, b, c, d) {
            self.studentItem({
                SName: '',
                IScore: 0,
                Id:-1
            });//一个关于用户的可观察对象
        }
    }

    var myView = new ViewModel();

    $(function () {


        getStudents();
        ko.applyBindings(myView);

    });
</script>